<template>
  <div class="mapdrilling-inner">
    <div id="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { TAIWAN_ADCODE, JD_ADCODE, EXISTING_SECOND_LAYER_REGION, EXISTING_THIRD_LAYER_REGION } from './constant'
import { getGeoJson, getMapData } from '@/api/map'

export default {
  name: 'MapDrilling',
  data: () => {
    return {
      mapChart: null, // echarts实例
      mapStack: [], // 存储地图数据
      timer: null,
    }
  },
  props:['dataMap'],
  watch: {
    dataMap: {
      handler(newVal) {
        if (newVal && newVal.length > 0 && this.mapChart) {
          this.updateMapData(newVal)
        }
      },
      deep: true
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', this.resizeChart)
  },
  beforeUnmount () {
    window.removeEventListener('resize', this.resizeChart)
    // 销毁地图实例
    if (this.mapChart) {
      this.mapChart.dispose()
    }
  },
  methods: {
    updateMapData(newData) {
      if (!this.mapChart) return
      
      // 获取当前地图的 geoJson
      const currentMap = this.topChild()
      if (!currentMap) return
      
      // 生成新的系列数据
      const seriesData = this.getSeriesDataByPart(newData, currentMap.geoJson)
      
      // 更新地图数据
      this.mapChart.setOption({
        series: [{
          data: seriesData
        }]
      })
    },
    resizeChart() {
      if (this.mapChart) this.mapChart.resize()
    },
     async getGeoAndMapData (type, mapName) {
      const [{ data: geoJson }, res] = await Promise.all([getGeoJson(type, mapName)])
      return { geoJson }
    },
    async initChart () {
      // 销毁旧的实例
      if (this.mapChart) {
        this.mapChart.dispose();
      }
      
      // 初始化echarts实例
      this.mapChart = echarts.init(document.getElementById('chart'))
      this.addChartEvent()

      // 获取渲染地图的相关数据
      this.mapChart.showLoading()
      const mapName = 'china'
      const { geoJson } = await this.getGeoAndMapData('china', mapName)
      this.mapChart.hideLoading()
      // 注册渲染地图
      const specialAreas = {
        澳门: {
          left: 113,
          top: 20.5,
          width: 0.7,
        },
        香港: {
          left: 115,
          top: 21.3,
          width: 2,
        },
      }
      const partData = this.dataMap
      this.registeRenderMap(mapName,partData , geoJson, specialAreas)

    },
    registeRenderMap (mapName, partData, geoJson, specialAreas = {}) {
      // 注册地图
      echarts.registerMap(mapName, geoJson, specialAreas)
      // 绘制地图
      this.renderMap(mapName, partData, geoJson)
    },

    // 添加绑定事件
    addChartEvent () {
      this.bindResizeWindow() // 监听屏幕大小改变
    },

    // 监听屏幕大小改变
    bindResizeWindow () {
      console.log(112312312);
      
      window.addEventListener('resize', () => {
        if (this.timer) return

        this.timer = setTimeout(() => {
          this.mapChart.resize()
          this.timer = null
        }, 100)
      })
    },

    /**
     * @description: 地图数据入栈，栈顶成员即当前渲染的地图数据
     * @param {String} mapName 地图名称 同注册地图方法registerMap 的第一个参数一致
     * @param {Array} partData 地图部分数据内容
     * @param {Object} geoJson 地图geoJson
     */
    pushStack (mapName, partData, geoJson) {
      this.mapStack.push({
        mapName,
        partData,
        geoJson,
      })
    },

    /**
     * @description: 获取栈顶成员
     */
    topChild () {
      if (this.mapStack.length === 0) return undefined
      return this.mapStack[this.mapStack.length - 1]
    },

    /**
     * @description: 注册渲染地图
     * @param {String} mapName 地图名称 同 option/series/map 一致
     * @param {Array} partData 地图部分数据内容
     * @param {Object} geoJson 地图geoJson
     * @param {Object} specialAreas 特殊区域
     */
    

    /**
     * @description: 绘制地图
     * @param {String} mapName 地图名称 同注册地图方法registerMap 的第一个参数一致
     * @param {Array} partData 地图部分数据内容
     * @param {Object} geoJson 地图geoJson
     */
    renderMap (mapName, partData, geoJson) {
      const seriesData = this.getSeriesDataByPart(partData, geoJson)
      const max = this.getVisualMapMax(seriesData)
      const min = Math.min(...seriesData.map(i => i.value))
      const option = {
        title: {
          x: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        dataRange: {
          min: 0,
          max: 2500,
          x: 'left',
          y: 'bottom',
          text: ['高', '低'],           // 文本，默认为数值文本
          calculable: true,
          color: ['#3385ff', '#66b2ff', '#99ccff', '#b3d9ff', '#cce5ff']
        },
        // toolbox: {
        //   show: true,
        //   orient: 'vertical',
        //   x: 'right',
        //   y: 'center',
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        series: [
          {
            name: '设备分布',
            type: 'map',
            map: 'china',
            roam: true,
            label: {
              show: true
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: seriesData
          }
        ]
      }

      // 绘制图表
      this.mapChart.setOption(option)

      // 如果渲染的地图 和 栈顶地图一致，无需入栈
      if (this.topChild() && mapName === this.topChild().mapName) {
        return
      }
      // 入栈
      this.pushStack(mapName, partData, geoJson)
      
    },

    /**
     * @description: 根据partData 和 geoJson 生成 seriesData
     * @param {Array} partData 地图部分数据内容
     * @param {Object} geoJson 地图geoJson
     */
    getSeriesDataByPart (partData, geoJson) {
      let data = geoJson.features
      .filter(item => item.properties.adcode != 1000001) // 过滤南海诸岛
      .map(({ properties }) => ({
        adcode: properties.adcode,
        name: properties.name,
        value: 0,
      }))
      
      if (geoJson.attach) {
        const attachData = geoJson.attach
        .filter(item => item.adcode != 1000001) // 过滤南海诸岛
        .map(item => ({
          adcode: item.adcode,
          name: item.name,
          value: 0,
        }))
        data.push(...attachData)
      }
      // 过滤掉九段线数据
      data = data.filter(item => item.adcode !== JD_ADCODE)

      data.forEach(item => {
        const currData = partData.find(i => i.adcode === item.adcode || String(i.adcode) === String(item.adcode))
        if (currData) {
          item.value = currData.value
        }
      })

      return data
    },

    /**
     * @description: 根据seriesData 动态计算生成 visualMap 的最大值
     * @param {Array} seriesData 地图数据内容
     */
    getVisualMapMax (seriesData) {
      const maxValue = Math.max(...seriesData.map(item => item.value || 0))
      return Math.ceil(maxValue / 10000) * 10000 // 向上取整一个量级
    },
  },
}
</script>

<style scoped lang="scss">
.mapdrilling-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  .chart {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}
</style>
